<template>
  <div id="jobTopSearch">
    <h1 class="con-right-title">
      阅读发布
    </h1>
    <div class="search-box">
      <el-form
        ref="ruleForm"
        :inline="true"
        :model="formInline"
        :rules="rules"
        class="demo-form-inline"
      >
        <el-form-item label="是否置顶" prop="topping">
          <el-select v-model="formInline.topping" clearable>
            <el-option
              v-for="item in topList"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序规则" prop="orderWay">
          <el-select v-model="formInline.orderWay">
            <el-option
              v-for="item in sortList"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="删除状态" prop="deleteStatus">
          <el-select v-model="formInline.deleteStatus">
            <el-option
              v-for="item in delStatusList"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择学院" prop="college">
          <el-select v-model="formInline.college" clearable>
            <el-option
              v-for="item in collegeList"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间线" prop="timeLine">
          <el-select v-model="formInline.timeLine">
            <el-option
              v-for="item in timeLineList"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户属性" prop="userProperty">
          <el-select v-model="formInline.userProperty" clearable>
            <el-option
              v-for="item in userAttList"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="展示方式" prop="showType">
          <el-select v-model="formInline.showType" clearable>
            <el-option
              v-for="item in showModeList"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="内容查询" prop="searchContent">
          <el-input
            v-model="formInline.searchContent"
            placeholder="根据标题或文章内容搜索"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="用户搜索" prop="userType">
          <el-select v-model="formInline.userType" placeholder="">
            <el-option
              v-for="item in userTypeList"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="userSearchContent">
          <el-input
            v-model="formInline.userSearchContent"
            placeholder="请输入相应的搜索内容"
            clearable
          ></el-input>
        </el-form-item>
        <!--时间类型：发布时间查询、创建时间查询-->
        <el-form-item label="" prop="timeType">
          <el-select v-model="formInline.timeType" placeholder="">
            <el-option
              v-for="item in timeTypeList"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="createTime">
          <el-date-picker
            v-model="formInline.createTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item class="s-btn">
          <el-button
            type="success"
            icon="el-icon-search"
            @click="toSearch('ruleForm')"
          >
            查询
          </el-button>
          <el-button type="success" plain @click="reset">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { sysNormalDisable } from '@utils/dictionariesFunc'
export default {
  name: 'JobTopSearch',
  msg: '阅读-我的发布-顶部搜索',
  props: {
    formInline: {
      type: Object,
      default: function() {
        return {
          // 搜索条件
          topping: '', // 是否置顶
          orderWay: 'PUBDESC', // 排序规则
          deleteStatus: '', // 删除状态
          college: '', // 选择学院
          timeLine: '', // 时间线
          userProperty: '', // 用户属性
          showType: '', // 展示方式
          searchContent: '', // 内容查询
          userType: 'dpAccount', //用户搜索类型
          userSearchContent: '', //用户搜索内容
          timeType: '', //时间类型：发布时间查询、创建时间查询
          startTime: '', // 开始时间
          endTime: '', // 结束时间
          createTime: []
        }
      }
    }
  },
  data() {
    return {
      topList: [{ dictLabel: '全部', dictValue: '' }], // 是否置顶
      sortList: [], // 排序规则
      delStatusList: [], // 删除状态
      collegeList: [{ dictLabel: '全部学院', dictValue: '' }], // 学院展示列表
      timeLineList: [], // 时间线
      userAttList: [{ dictLabel: '全部', dictValue: '' }], // 用户属性
      showModeList: [
        // 展示方式
        { dictLabel: '全部', dictValue: '' }
      ],
      userTypeList: [{ dictLabel: '大鹏号', dictValue: 'dpAccount' }], // 用户搜索
      timeTypeList: [], //时间类型：发布时间查询、创建时间查询
      rules: {
        topping: {},
        orderWay: {},
        deleteStatus: {},
        college: {},
        timeLine: {},
        userProperty: {},
        showType: {},
        searchContent: {},
        userType: {},
        userSearchContent: {},
        timeType: {},
        createTime: { type: 'array' }
      }
    }
  },
  watch: {
    'formInline.createTime': {
      handler(newVal, oldVal) {
        if (newVal && newVal.length > 1) {
          this.formInline.startTime = newVal[0]
          this.formInline.endTime = newVal[1]
        } else {
          this.formInline.startTime = ''
          this.formInline.endTime = ''
        }
      },
      deep: true
    }
  },
  mounted() {
    this.getStatusList()
  },
  methods: {
    /* 搜索 */
    toSearch(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit('toSearch')
        } else {
          return false
        }
      })
    },
    /* 重置 */
    reset() {
      this.$refs['ruleForm'].resetFields()
      //设置默认数据
      this.setDefaultValue()
    },
    /* 获取数据状态 */
    async getStatusList() {
      // 学院
      let data2 = await sysNormalDisable('sys_college', 'readCollegeType')
      this.collegeList = this.collegeList.concat(data2)
      // 是否置顶
      let data3 = await sysNormalDisable('sys_is_top')
      this.topList = this.topList.concat(data3)
      // 展示方式
      let data4 = await sysNormalDisable(
        'read_my_open_type',
        'readMyDisplayRule'
      )
      this.showModeList = this.showModeList.concat(data4)
      // 删除状态
      let data5 = await sysNormalDisable('sys_read_del_statu')
      this.delStatusList = [...data5]
      // 时间线
      let data9 = await sysNormalDisable('sys_read_time')
      this.timeLineList = [...data9]
      // 排序规则
      let data11 = await sysNormalDisable('read_list_sort')
      this.sortList = this.sortList.concat(data11)
      // 用户属性
      let data12 = await sysNormalDisable('reads_user_property', 'readUserAttr')
      this.userAttList = this.userAttList.concat(data12)
      // 时间类型
      let data13 = await sysNormalDisable('read_time_type')
      this.timeTypeList = [...data13]
      //设置默认数据
      this.setDefaultValue()
      //触发获取列表
      this.$emit('toSearch')
    },
    /*设置默认数据*/
    setDefaultValue() {
      this.formInline.orderWay = this.sortList[1].dictValue
      this.formInline.timeType = this.timeTypeList[0].dictValue
      this.formInline.deleteStatus = this.delStatusList[1].dictValue
      this.formInline.timeLine = this.timeLineList[0].dictValue
    }
  }
}
</script>

<style lang="less">
#jobTopSearch {
  .el-input {
    &.el-input--suffix {
      width: 182px !important;
    }
  }

  label.el-form-item__label {
    width: 70px !important;
  }
}
</style>
